<template>
  <div class="menu">
    <div class="main">
      <div class="menu_b" v-for="(item, index) in menu" :key="index">
        <div class="menu_b_t">{{ item.title }}<i></i></div>
        <div
          class="menu_b_f"
          v-for="(item2, index2) in item.child"
          :key="index2"
        >
          <router-link :to="item2.url">
            {{ item2.title }}
          </router-link>
        </div>
      </div>

      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "header",
  props: {
    msg: String
  },
  data: function() {
    return {
      menu: []
    };
  },
  created: function() {
    var name = this.$route.name;
    console.log(name);

    if (name == "Home") {
      this.menu = [
        {
          title: "设计",
          child: [
            { title: "建档案", url: "/" },
            { title: "画尺寸", url: "/" }
          ]
        },
        {
          title: "系统",
          child: [
            { title: "柜类", url: "/" },
            { title: "护墙", url: "/" },
            { title: "木门", url: "/" },
            { title: "楼梯", url: "/" },
            { title: "吊顶", url: "/" }
          ]
        },
        {
          title: "柜体",
          child: [
            { title: "贴纸颗粒", url: "/" },
            { title: "贴纸多层", url: "/" },
            { title: "UV多层", url: "/" },
            { title: "喷涂多层", url: "/" },
            { title: "指接贴皮", url: "/" },
            { title: "原木柜体", url: "/" }
          ]
        },
        {
          title: "柜门",
          child: [
            { title: "贴纸颗粒", url: "/" },
            { title: "贴纸多层", url: "/" },
            { title: "包覆柜门", url: "/" },
            { title: "铝框门", url: "/" },
            { title: "实木复合", url: "/" },
            { title: "原木", url: "/" }
          ]
        },
        {
          title: "配饰",
          child: [
            { title: "顶线", url: "/" },
            { title: "踢脚线", url: "/" },
            { title: "腰线", url: "/" },
            { title: "压线", url: "/" },
            { title: "收口板", url: "/" }
          ]
        },
        {
          title: "颜色",
          child: [
            { title: "纯色", url: "/" },
            { title: "木纹", url: "/" },
            { title: "石纹", url: "/" },
            { title: "皮革", url: "/" },
            { title: "套色", url: "/" }
          ]
        },
        {
          title: "工艺",
          child: [
            { title: "常规", url: "/" },
            { title: "做旧", url: "/" },
            { title: "描线", url: "/" }
          ]
        },
        {
          title: "风格",
          child: [
            { title: "美式", url: "/" },
            { title: "轻美式", url: "/" },
            { title: "欧式", url: "/" },
            { title: "简欧", url: "/" },
            { title: "法式", url: "/" },
            { title: "新中", url: "/" },
            { title: "新中式", url: "/" },
            { title: "现代", url: "/" },
            { title: "北欧", url: "/" },
            { title: "新古典", url: "/" },
            { title: "精致", url: "/" },
            { title: "朴素", url: "/" }
          ]
        },
        {
          title: "空间",
          child: [
            { title: "厨房", url: "/" },
            { title: "卧室", url: "/" },
            { title: "书房", url: "/" },
            { title: "客厅", url: "/" },
            { title: "餐厅", url: "/" },
            { title: "衣帽间", url: "/" },
            { title: "阳台", url: "/" },
            { title: "卫浴", url: "/" },
            { title: "门厅", url: "/" }
          ]
        },
        {
          title: "功能",
          child: [
            { title: "储物柜", url: "/" },
            { title: "功能柜", url: "/" },
            { title: "装饰柜", url: "/" }
          ]
        }
      ];
      return false;
    }

    if (name == "Soft_outfit_system") {
      this.menu = [
        {
          title: "最新",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "优选",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "沙发",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "床具",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "桌子",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "椅子",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "几类",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "柜子",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "架类",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "户外",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "品牌库",
          child: [
            { title: "建档案", url: "/" },
            { title: "画尺寸", url: "/" }
          ]
        }
      ];
      return false;
    }

    if (name == "Furniture") {
      this.menu = [
        {
          title: "最新",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "灯具",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "家纺",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "布艺",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "配饰",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "装饰",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "户外",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "生活",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "辅助系列",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "品牌库",
          child: [
            { title: "建档案", url: "/" },
            { title: "画尺寸", url: "/" }
          ]
        }
      ];
      return false;
    }

    if (name == "Product_Philosophyy") {
      this.menu = [
        {
          title: "最新",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "空间",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "风格",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "局部",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "定制",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "建材",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "家具",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "软装",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "材料数据",
          child: [
            { title: "1建档案", url: "/" },
            { title: "2画尺寸", url: "/" }
          ]
        },
        {
          title: "百科库",
          child: [
            { title: "建档案", url: "/" },
            { title: "画尺寸", url: "/" }
          ]
        }
      ];
      return false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.menu {
  width: 100%;
  height: 32px;
  display: block;
  float: left;
  margin: 15px 0 0;
}
.menu_b {
  width: 100px;
  height: auto;
  display: block;
  float: left;
  margin-right: 15px;
  border: 1px solid #fff;
  border-radius: 10px;
  position: relative;
  background: #ffffff;
  cursor: pointer;
  // -webkit-transition: all 0.3s linear;
  // transition: all 0.3s linear;
}
.menu_b:hover {
  border: 1px solid #000;
  // -webkit-transition: all 0.3s linear;
  // transition: all 0.3s linear;
}
.menu_b_t {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #000000;
  text-align: center;
  position: relative;
}
.menu_b_t i {
  width: 14px;
  height: 7px;
  display: block;
  float: right;
  position: absolute;
  top: 12px;
  right: 3px;
  background: url(../assets/xiala.svg) no-repeat;
  background-size: 14px 14px;
  background-position: 0 -7px;
}

.menu_b:hover .menu_b_t i {
  background-position: 0 0px;
}
.menu_b_f {
  width: 100%;
  height: 0px;

  opacity: 0;
  // position: absolute;
  // left: 0;
  // top: 30px;
  // -webkit-transition: all 0.3s linear;
  // transition: all 0.3s linear;
}
.menu_b:hover .menu_b_f {
  height: auto;
  opacity: 1;
  // -webkit-transition: all 0.3s linear;
  // transition: all 0.3s linear;
}
.menu_b_f a {
  width: 100%;
  height: 30px;
  display: block;
  line-height: 30px;
  font-size: 16px;
  color: #000000;
  text-align: center;
}
</style>
